<template>
  <div class="scroll">
    <div class="card">
      <div class="left">
        <slot name="icon"></slot>
        <div class="text">
          <slot name="title"></slot>
          <slot name="name"></slot>
          <slot name="care"></slot>
          <div class="border">
            <slot name="border1"></slot>
            <slot name="border2"></slot>
          </div>
        </div>
      </div>
      <div class="right">
        <slot name="edit"></slot>
        <slot name="delect"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "card",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.scroll {
  background-color: #fff;
  margin: 20px 10px 20px 0;
  .card {
    cursor: pointer;
    display: flex;
    padding: 35px 50px;
    justify-content: space-between;
    align-items: center;
    transition-duration: 0.3s;
    .left {
      display: flex;
      align-items: center;
      .text {
        margin-left: 40px;
        .title {
          font-size: 22px;
          color: rgba(0, 0, 0, 0.85);
        }
        i {
          color: #2575e6;
          font-size: 22px;
          margin-left: 5px;
        }
        .border {
          margin-top: 15px;
          .border1 {
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            background: #fafafa;
            padding: 5px 8px;
            margin-right: 5px;
            text-align: center;
          }
          .border2 {
            border: 1px solid #2575e6;
            border-radius: 5px;
            background: #2575e6;
            color: #fff;
            padding: 5px 8px;
            margin-right: 5px;
            text-align: center;
          }
        }
      }
    }
    .right {
      button {
        cursor: pointer;
        width: 72px;
        height: 35px;
        color: #fff;
        border-radius: 5px;
        font-size: 18px;
        padding: 5px 8px;
        margin: 0 10px;
      }
      .edit {
        background-color: #0052d9;
        border: #0052d9;
      }
      .edit:hover {
        background-color: #2575e6;
        border: #2575e6;
      }
      .delect {
        background-color: #ff4d4f;
        border: #ff4d4f;
      }
      .delect:hover {
        background-color: #ff7875;
        border: #ff7875;
      }
    }
  }
  
  .card:hover {
    // -webkit-box-shadow: #ccc 10px 10px 10px;
    // -moz-box-shadow: #ccc 10px 10px 10px;
    box-shadow: #ccc 10px 10px 10px;
  }
}
</style>
